<template>
	<view>
		<form>
			<view class="cu-form-group margin-top">
				<textarea maxlength="-1" v-model="text" :disabled="modalName != null" @input="textareaAInput" placeholder="编写动态内容"></textarea>
			</view>

			<view class="cu-bar bg-white margin-top">
				<view class="action">选择图片</view>
				<view class="action">{{ imgList.length }}/1</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item, index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
						<image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index"><text class="cuIcon-close"></text></view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length < 1"><text class="cuIcon-cameraadd"></text></view>
				</view>
			</view>
		</form>
		<view class="register-commit">
			<button @click="createComments" class="cu-btn bg-green shadow">发布</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			text: '',
			index: -1,
			multiIndex: [0, 0, 0],
			time: '12:01',
			date: '2018-12-25',
			switchA: false,
			switchB: true,
			switchC: false,
			switchD: false,
			radio: 'A',
			checkbox: [
				{
					value: 'A',
					checked: true
				},
				{
					value: 'B',
					checked: true
				},
				{
					value: 'C',
					checked: false
				}
			],
			imgList: [],
			modalName: null,
			textareaAValue: '',
			textareaBValue: '',
			tempPath: '',
			picUrl: ''
		};
	},
	methods: {
		PickerChange(e) {
			this.index = e.detail.value;
		},
		MultiChange(e) {
			this.multiIndex = e.detail.value;
		},
		TimeChange(e) {
			this.time = e.detail.value;
		},
		DateChange(e) {
			this.date = e.detail.value;
		},
		RegionChange(e) {
			this.region = e.detail.value;
		},
		SwitchA(e) {
			this.switchA = e.detail.value;
		},
		SwitchB(e) {
			this.switchB = e.detail.value;
		},
		SwitchC(e) {
			this.switchC = e.detail.value;
		},
		SwitchD(e) {
			this.switchD = e.detail.value;
		},
		RadioChange(e) {
			this.radio = e.detail.value;
		},
		//发布
		createComments() {
			let filePath = this.imgList[0];
			if (filePath) {
				//上传图片并新增动态
				uni.uploadFile({
					url: this.baseurl + '/comment/picUpload',
					filePath: filePath,
					name: 'da',
					success: res => {
						let obj = JSON.parse(res.data);
						if (obj.code != 200) {
							uni.showToast({
								icon: 'none',
								title: '图片上传失败'
							});
						} else {
							//携带图片地址新增评论
							uni.request({
								url: this.baseurl + '/comment/add',
								data: {
									ownerName: this.$store.state.userInfo.ownerName,
									comComment: this.text,
									parentId: 0,
									ownerId: this.$store.state.userInfo.ownerId,
									activityId: -1,
									pic:obj.data,
								},
								method: 'POST',
								header: {
									'content-type': 'application/x-www-form-urlencoded'
								},
								success: res => {
									if (res.data.code == 200) {
										uni.reLaunch({
											url: 'community'
										});
									} else {
										uni.showToast({
											icon: 'none',
											title: res.data.data
										});
									}
								}
							});
						}
					}
				});
			} else {
				//直接添加即可，不用上传照片
				uni.request({
					url: this.baseurl + '/comment/add',
					data: {
						ownerName: this.$store.state.userInfo.ownerName,
						comComment: this.text,
						parentId: 0,
						ownerId: this.$store.state.userInfo.ownerId,
						activityId: -1
					},
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						if (res.data.code == 200) {
							uni.reLaunch({
								url: 'community'
							});
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.data
							});
						}
					}
				});
			}
		},
		CheckboxChange(e) {
			var items = this.checkbox,
				values = e.detail.value;
			for (var i = 0, lenI = items.length; i < lenI; ++i) {
				items[i].checked = false;
				for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
					if (items[i].value == values[j]) {
						items[i].checked = true;
						break;
					}
				}
			}
		},
		ChooseImage() {
			uni.chooseImage({
				count: 4, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: res => {
					if (this.imgList.length != 0) {
						this.imgList = this.imgList.concat(res.tempFilePaths);
					} else {
						this.imgList = res.tempFilePaths;
					}
				}
			});
		},
		ViewImage(e) {
			uni.previewImage({
				urls: this.imgList,
				current: e.currentTarget.dataset.url
			});
		},
		DelImg(e) {
			uni.showModal({
				title: '您好',
				content: '确定要删除此附件吗？',
				cancelText: '取消',
				confirmText: '确认删除',
				success: res => {
					if (res.confirm) {
						this.imgList.splice(e.currentTarget.dataset.index, 1);
					}
				}
			});
		},
		textareaAInput(e) {
			this.textareaAValue = e.detail.value;
		},
		textareaBInput(e) {
			this.textareaBValue = e.detail.value;
		}
	}
};
</script>

<style>
@import url('../public/main.css');
@import url('../public/icon.css');
.cu-form-group .title {
	min-width: calc(4em + 15px);
}
</style>
